<template>
	<!-- 管理界面 -->
	<div id = "manager">
		<div id = "left-list">
			<div class = "list-title">
				<div class='icon'> </div>
				<p>管理中心</p>
			</div>
			<ul class="list-link">
				<li>
					<router-link to="/main/manager/managerUser">用户管理</router-link>
				</li>
				
				<li>
					<router-link to="/main/manager/managerCar">车辆管理</router-link>
					
				</li>
				<li>
					<router-link to="/main/manager/managerNotice">公告管理</router-link>
					
				</li>
			</ul>
		</div>
		<div id ="manager-show">
			<router-view></router-view>
		</div>
	</div>
</template>

<script>
	export default {
		data(){
			return{
				
			}
		},
		methods:{
			
		}
	}
</script>

<style lang="less" scoped>
	#manager{
		display: flex;
		display: -webkit-flex;
		height: 700px;
		width: 100%;
		flex-flow: row nowrap;
		
		#left-list{
			flex:1;
			background-color: hsla(0,0,1,.8); 
			border-right: 1px solid #ccc;
			margin-right: 5px;
			
			.list-title{
				padding-top: 20px;
				height: 40px;
				text-align: left;
				padding-left:20px; 
				.icon{
					background: url('../assets/icon/admin.png') no-repeat;
					background-size:22px 22px;
					width: 22px;
					height: 22px;
					display: inline-block;
					margin-right:5px; 
					
				}
				p{
					font-size: 20px;	
					display: inline-block;
					color: #333;
					
				}
			}
			.list-link{
				margin-top: 20px;
				 li{
					padding-top: 20px;
					padding-bottom: 20px;

					font-size: 18px;
					&:hover{
						a{
							color:#2faee3;
						}
						&::before{
							background-color:#2faee3;
						}
					}
					
					
					a{
						color: black;
						font-size:16px;
						color: rgba(0, 0,0, .6)
					}
					&::before{
						content: ' ';
						display: inline-block;
						margin-right:10px; 
						margin-bottom:2px; 
						width: 8px;
						height: 8px;
						background-color: rgba(0, 0,0, .5);
						border-radius:50%; 
					}
				}
			}
			
		}
		#manager-show{
			flex:6;
			background-color: hsla(0,0,1,.8); 
		}
	}
</style>
